<template>
  <view class="comp-b" style="background-color: #22c55e; padding: 20rpx; border-radius: 8rpx;">
    <text style="font-size: 32rpx; font-weight: bold; color: #000; margin-bottom: 20rpx; display: block;">子组件B</text>
    <view class="b-box" style="font-size: 28rpx; color: #000; margin-bottom: 20rpx;">
      <text>CompA组件传进来的值:</text>
      <!-- 蓝色背景+白色文字，匹配PPT -->
      <text style="background-color: #2563eb; color: #fff; padding: 2rpx 8rpx; border-radius: 4rpx; margin-left: 10rpx;">{{ result }}</text>
    </view>
    <view class="b-box" style="display: flex; align-items: center; gap: 10rpx;">
      <text style="font-size: 28rpx; color: #000;">回传值:</text>
      <!-- 灰色背景输入框，匹配PPT -->
      <input 
        type="text" 
        v-model="callbackValue" 
        style="color: #000; background-color: #ddd; border: none; padding: 15rpx; flex: 1; border-radius: 4rpx;" 
        placeholder="输入回传值"
      />
      <button @click="sendToParent" size="mini" type="default" style="background-color: #fff;">回传</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      callbackValue: "",
      result: ""
    };
  },
  created() {
    this.eventListener = uni.$on("getIntent", (msg) => {
      this.result = msg;
    });
  },
  beforeDestroy() {
    uni.$off("getIntent", this.eventListener);
  },
  methods: {
    sendToParent() {
      this.$emit("callBackFun", this.callbackValue);
    }
  }
};
</script>

<style scoped>
/* 样式已内联在template中 */
</style>